<template>
  <div>
    <div
      class="m-current"
    >
      <van-row>
        <van-col span="20">门店</van-col>
        <van-col span="4">复盘</van-col>
      </van-row>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多数据了"
      @load="onLoad"
    >
      <div
        v-for="item in list"
        :key="item.id"
        class="m-cost"
      >
        <van-row>
          <van-col span="20"> {{ item.salon }}</van-col>
          <van-col span="4">
            <van-button type="info" size="small" block @click="replay()">复盘</van-button>
          </van-col>
        </van-row>
      </div>
    </van-list>
    <van-popup
      v-model="show"
      closeable
      :style="{ height: '98%', width: '100%' }"
    >
      <van-cell-group style="margin: 10px;">
        <van-field v-model="value" rows="2" autosize type="textarea" placeholder="请输入复盘内容" />
      </van-cell-group>
      <van-row
        v-for="(item, index) in list2"
        :key="index"
        style="font-size: 14px; text-align: center;line-height: 40px;"
      >
        <van-col span="19">{{ item.content }}</van-col>
        <van-col span="5">{{ item.cdate }}</van-col>
      </van-row>
    </van-popup>
  </div>
</template>
<script>

import Row from 'vant/lib/row'
import Col from 'vant/lib/col'
import 'vant/lib/row/style'
import 'vant/lib/col/style'
import Button from 'vant/lib/button'
import List from 'vant/lib/list'
import CellGroup from 'vant/lib/cell-group'
import Cell from 'vant/lib/cell'
import Popup from 'vant/lib/popup'
import Field from 'vant/lib/field'
import Notify from 'vant/lib/notify'
import 'vant/lib/notify/style'
import 'vant/lib/field/style'
import 'vant/lib/popup/style'
import 'vant/lib/button/style'
import 'vant/lib/list/style'
import 'vant/lib/cell/style'
import 'vant/lib/cell-group/style'
import { mapGetters } from 'vuex'
import { getShopClerks, getSalon } from '@/api/txs'

export default {
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Notify.name]: Notify,
    [Field.name]: Field,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [List.name]: List
  },
  data () {
    return {
      value: '',
      show: false,
      list: [],
      loading: false,
      finished: false,
      list2: [
        { content: '23号的复盘内容', cdate: '2024/01/23' },
        { content: '13号的复盘内容', cdate: '2024/01/13' },
        { content: '3号的复盘内容', cdate: '2024/01/03' }
      ]
    }
  },
  computed: {
    ...mapGetters(['openId'])
  },
  created () {
    this.fetchData()
  },
  methods: {
    replay() {
      this.show = true
    },
    fetchData () {
      getSalon(this.openId).then(res => {
        this.salon = res.data.data
      })
    },
    onLoad () {
      this.loading = false
      // getShopClerks(this.openId).then(res => {
      //   this.list = res.data.data
      // })
      this.list = [
        { id: 1, salon: '---------美容院' },
        { id: 2, salon: '========美容院' },
        { id: 3, salon: 'xxxxxxxxxx美容院' },
      ]
      this.finished = true
    },
    onConfirm () {},
    formatter (type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      }
      return val
    },
    changeYear (val) {
      this.$refs.calendar.render(val.getFullYear(), val.getMonth() + 1)
    },
    wnlclick (e) {
      this.clerkObj.solar = e.year + '年' + e.month + '月' + e.day + '日'
      this.clerkObj.lunar = e.gzYear + '年' + e.lunarMonth + e.lunar
      this.clerkObj.gzn = e.gzYear
      this.clerkObj.gzy = e.gzMonth
      this.clerkObj.gzr = e.gzDay
    },
    onLoad2 () {
      this.loading = false
      getShopClerks(this.openId).then(res => {
        this.list = res.data.data
        this.finished = true
      })

      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     this.list.push(this.list.length + 1)
      //   }
      //   // 加载状态结束
      //   this.loading = false
      //   // 数据全部加载完成
      //   if (this.list.length >= 40) {
      //     this.finished = true
      //   }
      // }, 1000)
    },

  }
}
</script>
<style lang="scss">
.m-s-cell-boss {
  .van-swipe-cell__left {
    top: -20px;
  }
  .van-swipe-cell__right {
    top: -20px;
  }
}
.m-boss-calendar.showWeek.calendar-pro > div > table {
  thead {
    display: none;
  }
  td {
    .info-lunar {
      bottom: 0;
      right: 0;
      font-size: 20px;
    }
  }
}
</style>
<style lang="scss" scoped>
.m-cost{
  background-color: #fff;
  // color:#C31171;
  font-size: 26px;
  line-height: 60px;
  text-align: center;
  // box-shadow: 0px 0px 5px rgb(201, 201, 201);
  margin-bottom: 2px;
}
.m-current{
  background-color: #fff;
  line-height: 30px;
  font-size: 20px;
  color: rgb(184, 184, 184);
  text-align: center;
}
.m-add {
  margin-bottom: 10px;
}
.m-div {
  font-size: 30px;
  font-weight: bold;
}
.m-p {
  font-size: 24px;
}
.m-salon-field {
  margin-right: 200px;
}
</style>
